<template>
    <div class="default-main loading">
        <el-row :gutter="30">
            <el-col class="lg-mb-20" >
                <div class="admin-info" >
                    <div class="admin-info-form">
                        <el-form
                            ref="formRef"
                            :rules="rules"
                            :model="info"
                            label-width="120px"
                        >
                            <FormItem label="Logo"  type="image" v-model="info.logo" />
                            <el-form-item prop="siteName" label="站点名称">
                                <el-input  v-model="info.siteName" placeholder="站点名称"></el-input>
                            </el-form-item>
                            <el-form-item prop="record_number" label="备案号">
                                <el-input v-model="info.record_number" placeholder="备案号"></el-input>
                            </el-form-item>

                            <el-form-item prop="version" label="版本号">
                                <el-input v-model="info.version" placeholder="版本号"></el-input>
                            </el-form-item>
                            <el-form-item prop="no_access_ip" label="禁止访问IP">
                                <el-input v-model="info.no_access_ip" placeholder="禁止访问站点的ip，一行一个" type="textarea" />
                            </el-form-item>
                            <FormItem
                                label="维护状态"
                                v-model="info.status"
                                type="radio"
                                :data="{ content: { '0': '启用' ,'1': '维护'}, childrenAttr: { border: true } }"
                            />
                            <el-form-item prop="notice" label="维护公告">
                                <el-input v-model="info.notice" placeholder="维护公告" type="textarea" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit(formRef)">
                                    保存
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue'
import type {FormInstance, FormItemRule} from 'element-plus'
import {buildValidatorData} from '/@/utils/validate'
import {useAdminInfo} from '/@/stores/adminInfo'
import createAxios from "/@/utils/axios";
import FormItem from "/@/components/formItem/index.vue";
import iconfontInit from "/@/utils/iconfont";

defineOptions({
    name: 'routine/adminInfo',
})

const formRef = ref<FormInstance>()



let info: any = ref({
    name: '',
    record_number: '',
    version: '',
    no_access_ip: '',
    status:'1',
    notice:''
})

const index = () => {
    createAxios({
        url: '/admin_api/config/index',
        params: {group: 'basics'},
        method: 'get',
    }).then((res) => {
        info.value = res.data.row
    })
}

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    siteName: [buildValidatorData({name: 'required', title: '站点名称'})],

})


const onSubmit = (formEl: FormInstance | undefined) => {
    info.value.group = 'basics'
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            createAxios({
                url: '/admin_api/config/edit',
                data: info.value,
                method: 'post',
            },{showSuccessMessage:true}).then((res) => {

            })
        }
    })
}

onMounted(() => {
    index()
})
</script>

<style scoped lang="scss">
.admin-info {
    background-color: var(--ba-bg-color-overlay);
    border-radius: var(--el-border-radius-base);
    border-top: 3px solid #409eff;

    .avatar-uploader {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 60px auto 10px auto;
        border-radius: 50%;
        box-shadow: var(--el-box-shadow-light);
        border: 1px dashed var(--el-border-color);
        cursor: pointer;
        overflow: hidden;
        width: 110px;
        height: 110px;
    }

    .avatar-uploader:hover {
        border-color: var(--el-color-primary);
    }

    .avatar {
        width: 110px;
        height: 110px;
        display: block;
    }

    .image-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .admin-info-base {
        .admin-nickname {
            font-size: 22px;
            color: var(--el-text-color-primary);
            text-align: center;
            padding: 8px 0;
        }

        .admin-other {
            color: var(--el-text-color-regular);
            font-size: 14px;
            text-align: center;
            line-height: 20px;
        }
    }

    .admin-info-form {
        padding: 30px;
    }
}

.el-card :deep(.el-timeline-item__icon) {
    font-size: 10px;
}

@media screen and (max-width: 1200px) {
    .lg-mb-20 {
        margin-bottom: 20px;
    }
}
</style>
